$(function () {
    //发送请求，渲染页面
    initArtCateList()

    //封装渲染函数
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
            method: 'get',

        }).then(({ data: res }) => {
            //成功回调
            
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(function (value, index) {
                arr.push(`
                    <tr>
                        <td>${value.Id}</td>
                        <td>${value.name}</td>
                        <td>${value.alias}</td>
                        <td>
                        <button data-id="${value.Id}" class="editbtn layui-btn layui-btn-xs">修改</button>
                        <button data-id="${value.Id}" class="delbtn layui-btn layui-btn-danger layui-btn-xs">删除</button>
                        </td>
                    </tr>
                `)
                $('tbody').empty().html(arr.join(''))
            })
        });
    }

    //添加按钮
    let indexAdd = 0;
    $('#addbtn').on('click', function () {
        indexAdd = layer.open({
            title: '添加文章类别',
            type: 1,
            area: ['500px', '260px'],
            content: `<form id="addform" class="layui-form" action="" >
                                 <!-- 1，分类名称 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required lay-verify="required"
                                        placeholder="请输入分类名称" autocomplete="off" class="layui-input" id="username">
                                </div>
                        </div>
                                <!-- 2，分类别名 -->
                         <div class="layui-form-item">
                            <label class="layui-form-label">分类别名</label>
                                <div class="layui-input-block">
                                     <input type="text" name="alias" required lay-verify="required"
                                        ="请输入分类别名" autocomplete="off" class="layui-input" id="username">
                         </div>
                        </div>
                                    <!-- 2，按钮 -->
                        <div class="layui-form-item">
                                <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                <button class="layui-btn" lay-submit lay-filter="formDemo">重置</button>
                        </div>
                        </div>
                   
                      </form>`
        });
    })


    $('body').on('submit', '#addform', function (e) {
        e.preventDefault()
        axios({
            url: '/my/article/addcates',
            method: 'post',
            data: $(this).serialize(),

        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg('恭喜您，添加文章成功！')
            initArtCateList()
        });
    })
    //点击按钮，弹出修改框
    let indexEdit = 0;
    $('tbody').on('click', '.editbtn', function () {
        indexEdit = layer.open({
            title: '修改文章类别',
            type: 1,
            area: ['500px', '260px'],
            content: `<form id="editform" class="layui-form" action="" lay-filter="editform">
                        <input type="hidden" name="Id">

                                 <!-- 1，分类名称 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required lay-verify="required"
                                        placeholder="请输入分类名称" autocomplete="off" class="layui-input" id="username">
                                </div>
                        </div>
                                <!-- 2，分类别名 -->
                         <div class="layui-form-item">
                            <label class="layui-form-label">分类别名</label>
                                <div class="layui-input-block">
                                     <input type="text" name="alias" required lay-verify="required"
                                        ="请输入分类别名" autocomplete="off" class="layui-input" id="username">
                         </div>
                        </div>
                                    <!-- 2，按钮 -->
                        <div class="layui-form-item">
                                <div class="layui-input-block">
                                <button id="editbtn" class="layui-btn" lay-submit lay-filter="formDemo">提交修改</button>
                                <button class="layui-btn" lay-submit lay-filter="formDemo">重置</button>
                        </div>
                        </div>
                   
                      </form>`
        });

        let id = $(this).attr('data-id')
        console.log(id)

        axios({
            url: `/my/article/cates/${id}`,
            method: 'get',

        }).then(({ data: res }) => {
            //成功回调
            console.log(res)
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            //成功后渲染
            layui.form.val("editform", res.data)
        });

    })

    //点击修改提交按钮
    $('body').on('submit', '#editform', function (e) {

        e.preventDefault()
        axios({
            url: '/my/article/updatecate',
            method: 'post',
            data: $(this).serialize(),

        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            layer.msg('恭喜您，添加文章成功！')
            initArtCateList()
            layer.close(indexEdit)
        });
    })

    //删除按钮 
    $('body').on('click', '.delbtn', function () {
        let id = $(this).attr('data-id')
        //确认弹出层
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                url:'/my/article/deletecate/' + id,
                method:'get',
            }).then(({data:res})=>{
                //成功回调
                if(res.status != 0 ){
                    return layer.msg(res.message)
                }
                layer.msg('恭喜您，删除成功！')
                initArtCateList()
            });

            layer.close(index);
        });
    })

})